<template>
	<view class="course-area">
		<!-- 左侧边栏 -->
		<view class="sidebar">
			<view 
				class="category-item" 
				:class="{ active: currentCategory === 'all' }"
				@click="handleCategoryClick('all')"
			>
				全部
			</view>
			<view 
				v-for="item in categoryList" 
				:key="item.categoryId"
				class="category-item"
				:class="{ active: currentCategory === item.categoryId }"
				@click="handleCategoryClick(item.categoryId)"
			>
				{{ item.categoryName }}
			</view>
		</view>
		
		<!-- 右侧课程列表 -->
		<view class="content">
			<view class="course-list">
				<view class="course-item" v-for="(item, idx) in courseList" :key="idx" @click="toCourseInfo(item.courseId)">
					<image class="course-img" :src="item.img" mode="aspectFill" />
					<view class="course-info">
						<view class="course-title">{{ item.title.length > 15 ? item.title.slice(0, 15) + ' . . .' : item.title }}</view>
						<view class="course-time">
							<text :class="['course-type', item.courseType === '线上课' ? 'online-course' : 'offline-course']">{{ item.courseType }}</text>
							<text class="course-hours">{{ item.hours }}课时</text>
						</view>
						<view class="course-meta">
							<text :class="['course-price', (!item.price || item.price === 0) ? 'free-price' : 'paid-price']">{{ (!item.price || item.price === 0) ? '免费' : '¥' + item.price }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { selectCourse } from '@/api/course-area.js'
	import { selectCourseCategory } from '@/api/course-area.js'
	
	export default {
		data() {
			return {
				courseList: [],
				categoryList: [],
				currentCategory: 'all',
				campusId: '',
				loading: false
			}
		},
		onLoad() {
			this.campusId = uni.getStorageSync('campusId')
			this.loadCategoryList()
			this.loadCourseList()
		},
		methods: {
			async loadCategoryList() {
				try {
					const res = await selectCourseCategory(this.campusId)
					if (res && res.data) {
						this.categoryList = res.data.list || []
					}
				} catch (e) {
					console.error('加载课程类别失败:', e)
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					})
				}
			},
			async loadCourseList() {
				this.loading = true
				try {
					const data = {
						campusId: this.campusId,
						categoryId: this.currentCategory === 'all' ? '' : this.currentCategory
					}
					const res = await selectCourse(data)
					if (res && res.data) {
						this.courseList = (res.data.list || []).map(item => ({
							courseId: item.courseId,
							img: item.url || '/static/img/ai.jpg',
							title: item.courseName || '无标题',
							hours: item.hours || 0,
							courseType: item.courseType || '未分类',
							price: item.price || 0
						}))
					}
				} catch (e) {
					console.error('加载课程列表失败:', e)
					uni.showToast({
						title: '加载失败，请重试',
						icon: 'none'
					})
				} finally {
					this.loading = false
				}
			},
			handleCategoryClick(categoryId) {
				if (this.currentCategory === categoryId) return
				this.currentCategory = categoryId
				this.loadCourseList()
			},
			toCourseInfo(courseId) {
				uni.navigateTo({
					url: '/pages/course/course?courseId=' + courseId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.course-area {
	display: flex;
	min-height: 100vh;
	background: #f7f7f7;
}

.sidebar {
	width: 25%;
	background: #fff;
	height: 100vh;
	position: fixed;
	left: 0;
	top: 0;
	border-right: 1rpx solid #eee;
}

.category-item {
	padding: 25rpx 20rpx;
	font-size: 28rpx;
	color: #333;
	text-align: center;
	border-bottom: 1rpx solid #e7e7e7;
	
	&.active {
		color: #2979ff;
		background: #f0f7ff;
		position: relative;
		
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%);
			width: 8rpx;
			height: 32rpx;
			background: #2979ff;
			border-radius: 0 4rpx 4rpx 0;
		}
	}
}

.content {
	flex: 1;
	margin-left: 25%;
	padding: 20rpx;
}

.course-list {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.course-item {
	display: flex;
	background: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.04);
}

.course-img {
	width: 200rpx;
	height: 200rpx;
	background: #eee;
	flex-shrink: 0;
}

.course-info {
	flex: 1;
	padding: 20rpx;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.course-title {
	font-size: 28rpx;
	font-weight: 500;
	color: #222;
}

.course-time {
	display: flex;
	align-items: center;
	gap: 16rpx;
}

.course-type {
	padding: 4rpx 12rpx;
	border-radius: 6rpx;
	font-size: 22rpx;
}

.online-course {
	background: #e6f7ff;
	color: #1890ff;
}

.offline-course {
	background: #f6ffed;
	color: #52c41a;
}

.course-hours {
	color: #faad14;
	font-size: 22rpx;
}

.course-meta {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.course-price {
	font-size: 28rpx;
	font-weight: bold;
}

.free-price {
	color: #52c41a;
}

.paid-price {
	color: #ff4d4f;
}
</style>